<template>
    <div>
       <h3>新增会员</h3>
       <table class="table">
        <thead>
            <tr>
                <td>name</td>
                <td><input type="text" v-model="obj.name"></td>
            </tr>
            <tr>
                <td>password</td>
                <td><input type="password" v-model="obj.password"></td>
            </tr>
            <tr>
                <td>会员等级</td>
                <td>
                    <select v-model="obj.levelId">
                        <option value="0">请选择会员等级</option>
                        <option v-for="d in data" :value="d.id">{{d.title}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="新增" @click="Add">
                </td>
            </tr>
        </thead>
       </table>
       <a href="/">返回会员列表</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter()

//相当于文档就绪函数 
onMounted(()=>{
    BindLevel()
})

//动态读取下拉框数据
const data=ref([])
//绑定会员等级下拉框
const BindLevel=()=>{
     axios.get("/api/MemberLevel/GetAllMemberLevel",{}).then(res=>{
         data.value=res.data
     })
}
const obj=ref({
    name:'',
    password:'',
    levelId:0,

})
//新增会员
const Add=()=>{
   axios.post("/api/Member/AddMember",obj.value).then(res=>{
    //console.log(obj.value)
    
      if(res.data>0)
      {
        alert('新增成功')
        router.push("/")
      }
      else
      {
        alert('新增失败!!!!')
      }
   })
}


</script>

<style scoped>

</style>